<template>
    <el-container class="default-container">
        <el-aside style="width: 200px">
            <div class="title">粤易通管理后台</div>
            <el-menu  default-active="1"
					  background-color="#545c64"
					  text-color="#fff"
					  @open="handleOpen"
					  @close="handleClose"
					  active-text-color="#ffd14b" unique-opened>
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-star-off"></i>泊车相关</template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1">
                            <router-link to="/default/area" tag="li">
                                <span>区域管理</span>
                            </router-link>
                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <router-link to="/default/park" tag="li">
                                <span>停车场管理</span>
                            </router-link>
                        </el-menu-item>
                        <el-menu-item index="1-3">
                            <router-link to="/default/parkPoint" tag="li">
                                <span>节点管理</span>
                            </router-link>
                        </el-menu-item>
                        <el-menu-item index="1-4">
                            <router-link to="/default/settle" tag="li">
                                <span>标准管理</span>
                            </router-link>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-user"></i>用户相关</template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1">
                            <router-link to="/default/license" tag="li">
                                <span>车辆管理</span>
                            </router-link>
                        </el-menu-item>
                        <el-menu-item index="2-2">
                            <router-link to="/default/bill" tag="li">
                                <span>订单管理</span>
                            </router-link>
                        </el-menu-item>
                        <el-menu-item index="2-3">
                            <router-link to="/default/customer" tag="li">
                                <span >用户管理</span>
                            </router-link>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-data-board"></i>图表统计</template>
                    <el-menu-item-group>
                        <el-menu-item index="3-1">
                            <router-link to="/default/dataView" tag="li">
                                <span>数据可视化</span>
                            </router-link>
                        </el-menu-item>
                        <el-menu-item index="3-2">
                            <router-link to="/default/report" tag="li">
                                <span>收费报表</span>
                            </router-link>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title"><i class="el-icon-set-up"></i>系统配置</template>
                    <el-menu-item-group>
                        <el-menu-item index="4-1">
                            <router-link to="/default/payInfo" tag="li">
                                <span>支付信息配置</span>
                            </router-link>
                        </el-menu-item>
                        <el-menu-item index="4-2">
                            <router-link to="/default/oSSInfo" tag="li">
                                <span>OSS配置信息</span>
                            </router-link>
                        </el-menu-item>
                        <el-menu-item index="4-3">
                            <router-link to="/default/adminSetting" tag="li">
                                <span>管理员配置</span>
                            </router-link>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header class="detail">
                <div class="count">
                    <div>
                        <i class="el-icon-user"></i>
                        <span>在线人数：<span>12</span></span>
                    </div>
                   <div>
                       <i class="el-icon-location-information"></i>
                       <span>停车场数量：<span>39</span></span>
                   </div>
                </div>
                <div href="javascript:;" style="font-size: 15px;" class="userHeadImage">
					<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="margin-right: 10px"></el-avatar>
                    {{name}}
                </div>
            </el-header>

            <el-main style="overflow:hidden;">
                <transition mode="out-in">
                    <router-view></router-view>
                </transition>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(20).fill(item),
                name: '管理员'
            }
        },
		methods:{
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
    };
</script>

<style>
    .default-container {
        box-sizing: border-box;
        width: 100vw;
        height: 100vh;
        background-image: url();
        /* background-color: #112346; */
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center right;
        background-size: 100%;
    }

    .el-header {
        background-color: #409EFF;
        color: #333;
        line-height: 70px;
    }

    .el-aside {
        height: 100vh;
        width: 200px;
        color: #333;
        background: #545c64;
        overflow: hidden;

    }

    .title {
        height: 70px;
        font-size: 20px;
        font-weight: bolder;
        text-align: center;
        line-height: 70px;
		border-bottom: 2px solid white;
		color: white;
    }

    ul {
        overflow: hidden;
    }

    .detail {
        display: flex;
		justify-content: space-between;
        background-color: #545c64;
        height: 70px !important;
    }
    .detail>.count{
        display: flex;
        flex-direction: row;
        color: antiquewhite;
        font-size: 12px;
        transform: translateY(15px);
    }
    .detail>.count>*{
        margin-right: 10px;
    }
	.userHeadImage {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		color: white;
		margin-right: 50px;
	}
	.active{
		color: #42b983;
	}
	
    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateX(80px);
    }

    .v-enter-active,
    .v-leave-active {
        transition: all 0.4s ease;
    }
</style>
